<!-- 机构小程序管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {}; gzThreeRef.clear() }">
        <a-form-item class="table-search-item">
          <GzTreeSelect ref="gzThreeRef" v-model:value="searchData['agentNo']" :isNeedDefault="false" />
        </a-form-item>
      </GzSearchForm>
      <!-- 列表渲染 -->
      <GzTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="agentNo"
        @btnLoadClose="btnLoading = false"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_MP_INFO_ADD')" type="primary" @click="addOrEditFunc(false)">
            <plus-outlined />新建
          </a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'imgUrl'">
            <a-image v-if="record.imgUrl" :src="record.imgUrl" style="width: 80px; height: 80px;" />
            <img v-else src="@/assets/svg/default-img.svg">
          </template>
          <!-- <template v-if="column.key === 'wxOfficialChannel'">
            {{ record.wxOfficialChannel === 'WxChat' ? '是' : '否' }}
          </template> -->
          <template v-if="column.key === 'isDeleted'">
            <span>{{ record.isDeleted ==0 ? '否':'是' }}</span>
          </template>
          <template v-if="column.key === 'isDefault'">
            <span>{{ record.isDefault ==0?'否':'是' }}</span>
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button v-if="$access('ENT_MP_INFO_EDIT')" type="link" @click="addOrEditFunc(record)">修改</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 新增修改 -->
    <AddOrEdit ref="addOrEditRef" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import AddOrEdit from './AddOrEdit.vue'
// import {$apiAgentLite} from '@/api/proxy/officialManage/proxyOfficialManage/index'
import {$apiAgentApp} from '@/api/proxy/programManage/lite/index'
import { ref, reactive, getCurrentInstance } from 'vue'

const gzThreeRef = ref()
const infoTable = ref()
const addOrEditRef = ref()

const { $access, $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

let tableColumns = reactive([
  { key: 'appId', title: 'appid', dataIndex: 'appId', fixed: 'left', width: 170, minWidth: 170, maxWidth: 220 },
  // { key: 'appSecret', title: 'appsecret', dataIndex: 'appSecret', width: 220, minWidth: 220, maxWidth: 270  },
  { key: 'name', title: '公众号名称', dataIndex: 'name', width: 120, minWidth: 120, maxWidth: 170 },
  { key: 'agentNo', title: '机构号', dataIndex: 'agentNo', width: 120, minWidth: 120, maxWidth: 170 },
  { key: 'agentName', title: '机构名称', dataIndex: 'agentName', width: 120, minWidth: 120, maxWidth: 170 },
  { key: 'imgUrl', title: '公众号二维码', dataIndex: 'imgUrl', width: 120, minWidth: 120, maxWidth: 170 },
  { key: 'remark', title: '备注', dataIndex: 'remark', width: 120, minWidth: 120, maxWidth: 170 },
  // { key: 'wxOfficialChannel', title: '是否已托管', dataIndex: 'wxOfficialChannel', width: 120, minWidth: 120, maxWidth: 170 },
  { key: 'isDeleted', title: '是否已解除绑定', dataIndex: 'isDeleted', width: 140, minWidth: 120, maxWidth: 170 },
  { key: 'isDefault', title: '是否为默认应用', dataIndex: 'isDefault', width: 140, minWidth: 120, maxWidth: 170 },
  { key: 'operation', title: '操作',  fixed: 'right', align: 'center', width: 260 }
])

let btnLoading = ref(false)
let searchData = ref({})

/**
 * 请求table接口数据
 * @param params  查询条件
 */
function reqTableDataFunc(params: any) {
  return $apiAgentApp({type:0,...params})
}

/**
 * 点击【查询】按钮点击事件
 */
function searchFunc() {
  infoTable.value.refTable(true)
}

// 新增修改
function addOrEditFunc(record){
  addOrEditRef.value.show(record)
}
</script>